<template>
    <div class="app-container">
        <el-card>
            <div slot="header">
                <h3>学生管理</h3>
            </div>
            <div class="informationSelect">
                <div class="informationSelectInner">
                    <el-form :inline="true" v-model="studentQuery" class="demo-form-inline">
                        <el-form-item>
                            <el-input v-model="studentQuery.name" placeholder="请输入学生姓名" suffix-icon="el-icon-search" />
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="studentQuery.qingongjianxue_tatus" placeholder="请输入招聘状态"
                                suffix-icon="el-icon-search" />
                        </el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="loadStudent()">查询</el-button>
                        <el-button type="info" plain icon="el-icon-search" @click="resetData()">清空</el-button>
                        <el-button type="success" @click="showStudentDialog('add')" icon="el-icon-plus">新增</el-button>
                    </el-form>
                </div>
            </div>
            <div class="studentBox">
                <template>
                    <el-table v-loading="listLoading" :data="students" style="width: 100%">
                        <el-table-column prop="studentId" label="学号"></el-table-column>
                        <el-table-column prop="name" label="姓名"></el-table-column>
                        <el-table-column prop="gender" label="性别"></el-table-column>
                        <el-table-column prop="college" label="学院"></el-table-column>
                        <el-table-column prop="major" label="专业"></el-table-column>
                        <el-table-column prop="stuclass" label="班级"></el-table-column>
                        <el-table-column prop="phone" label="电话"></el-table-column>
                        <el-table-column prop="jobName" label="应聘岗位"></el-table-column>
                        <el-table-column prop="qingongjianxueStatus" label="状态"></el-table-column>
                        <el-table-column prop="applyTime" label="申请时间"></el-table-column>
                        <el-table-column label="操作" fixed="right">
                            <template slot-scope="scope">
                                <el-button type="text" icon="el-icon-edit"
                                    @click="showStudentDialog('edit', scope.row)">编辑</el-button>
                                <el-button type="text" class="delete" icon="el-icon-delete"
                                    @click="handleDelete(scope.row.studentId)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 弹出框 -->
                    <el-dialog :visible.sync="dialogVisibleStudent" title="编辑信息" @close=closeDialog>
                        <el-form :model="student" :rules="rules" ref="studentForm" label-width="80px">
                            <el-form-item label="姓名" prop="name">
                                <el-input @input="forceUpdate" v-model="student.name"></el-input>
                            </el-form-item>
                            <el-form-item label="性别" prop="gender">
                                <el-radio-group v-model="student.gender">
                                    <el-radio label="男">男</el-radio>
                                    <el-radio label="女">女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="学院" prop="college">
                                <el-input @input="forceUpdate" v-model="student.college"></el-input>
                            </el-form-item>
                            <el-form-item label="专业" prop="major">
                                <el-input @input="forceUpdate" v-model="student.major"></el-input>
                            </el-form-item>
                            <el-form-item label="班级" prop="stuclass">
                                <el-input @input="forceUpdate" v-model="student.stuclass"></el-input>
                            </el-form-item>
                            <el-form-item label="电话" prop="phone">
                                <el-input @input="forceUpdate" v-model="student.phone"></el-input>
                            </el-form-item>
                            <el-form-item label="应聘岗位" prop="jobName">
                                <el-input @input="forceUpdate" v-model="student.job"></el-input>
                            </el-form-item>
                            <el-form-item label="申请状态" prop="qingongjianxueStatus">
                                <el-radio-group v-model="student.qingongjianxueStatus">
                                    <el-radio label="已录取">已录取</el-radio>
                                    <el-radio label="未录取">未录取</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <!-- <el-form-item label="申请时间" prop="applyTime">
                                <el-input v-model="student.applyTime"></el-input>
                            </el-form-item> -->

                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisibleStudent = false">取 消</el-button>
                            <el-button type="primary" @click="submitForm">确 定</el-button>
                        </div>
                    </el-dialog>
                </template>
            </div>
        </el-card>
    </div>
</template>

<script>
import jobApi from '@/api/job'
export default {
    data() {
        return {
            studentQuery: {},//条件封装对象
            listLoading: true, // 是否显示loading信息
            page: 1,//当前页
            limit: 9,//每页记录数
            studentQuery: {},//条件封装对象
            total: 0,//总记录数
            students: [], // 岗位列表
            dialogVisibleStudent: false, // 是否显示编辑框
            dialogType: '', // 编辑框类型（新增/编辑）
            student: {},
            rules: { // 表单校验规则

                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur', }
                ],
                // gender: [
                //     { required: true, message: '请选择性别', trigger: 'blur' }
                // ],
                collage: [
                    { required: true, message: '请输入学院', trigger: 'blur' }
                ],
                major: [
                    { required: true, message: '请输入专业', trigger: 'blur' }
                ],
                class: [
                    { required: true, message: '请输入班级', trigger: 'blur', }
                ]
            },
        }
    },
    mounted() {
        // 加载岗位列表
        this.loadStudent();
    },
    methods: {
        //嵌套太深导致无法输入，强制刷新
        forceUpdate() {
            this.$forceUpdate()
        },
        // 显示编辑框
        showStudentDialog(type, vstudent) {
            // this.student = {};
            this.dialogType = type;
            if (type === 'add') {
                this.student = {};
            } else if (type === 'edit') {
                // this.student=  Object.assign({}, vstudent);
                Object.assign(this.student, vstudent);

                console.log("this.student",this.student)
            }
            // this.$nextTick(() => {
            //     this.$refs.studentForm.resetFields();

            // })
            vstudent = {}
            this.dialogVisibleStudent = true;
        },
        //关闭弹框的事件
        closeDialog() {
            // this.$nextTick(() => {
            //     this.$refs.studentForm.resetFields();

            // })
            this.student = {};//清空数据
            // console.log('关闭方法以后的student', this.student)
        },
        handleDelete(studentId) {

            // console.log(2222222, jobId)
            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                jobApi.deleteStudent(studentId)
                    .then((res) => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                        this.loadStudent()
                    })
            })
                .catch((response) => { // 失败
                    if (response === 'cancel') {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: '删除失败'
                        })
                    }
                })
        },
        loadStudent(page = 1) {
            this.page = page
            this.listLoading = true
            jobApi.getStudentListPage(this.page, this.limit, this.studentQuery)
                .then(res => {
                    console.log(11111, res)
                    this.students = res.data.rows
                    // this.total = res.data.total + 1
                    // console.log("22students22", this.students)
                })
                .catch(error => {
                    console.log(error)
                })
            this.listLoading = false

        },
        resetData() {
            this.studentQuery = {}
            this.loadStudent()
        },
        submitForm() {
            this.$refs.studentForm.validate(student => {
                if (student) {
                    // 调用后端API保存岗位数据
                    if (this.dialogType === 'add') {
                        // console.log(33333, currentJob)
                        jobApi.addStudent(this.student)
                            .then(res => {
                                this.loadStudent();
                                this.dialogVisibleStudent = false;
                                this.$message.success('添加成功');

                            });
                    } else if (this.dialogType === 'edit') {
                        // console.log(222, this.currentJob)
                        jobApi.updateStudent(this.student)
                            .then(res => {
                                this.loadStudent();
                                this.dialogVisibleStudent = false;
                                this.$message.success('修改成功');

                            });
                    }
                    //1.清除所有表单项的验证提示信息

                    // // 模拟保存数据
                    // this.loadJobs();


                }
            });
        },
    }
}
</script>

<style >
.studentBox {
    border-radius: 50px;
    background: #e0e0e0;
    box-shadow: 20px 20px 60px #bebebe,
        -20px -20px 60px #ffffff;
}

.studentSelect {
    border-radius: 10px;
    background: #e6e6e6;
    /* background: linear-gradient(315deg, #e6e6e6, #ffffff);
    box-shadow: -20px -20px 60px #d9d9d9,
        20px 20px 60px #ffffff; */

    margin-bottom: 20px;
}

.studentSelectInner {
    padding: 10px;
}

.delete {
    color: #f56c6c;
}
</style>

